<template>
  <div class="box">
      <div class="top">
      <div class="left">
      <el-input
    v-model="input"
    class="w-50 m-2"
    size="large"
    placeholder="请输入搜索关键字"
 
  />
  <div class="button">
      <el-button type="primary" class="btn" @click="search">搜索</el-button>
  </div>
  </div>

  <div class="right">
      <el-select v-model=" options.valuet" filterable placeholder="状态" size="large" class="select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.valuet"
  />
</el-select>
  <div class="button">
      <el-button type="primary" class="btn" @click="sift">筛选</el-button>
  </div>
  </div>
  <!-- 增加用户 -->
  <div class="addUser">
      <div class="button">
      <el-button type="primary" class="addnewrole" @click="roleadd">新增角色</el-button>
      <el-dialog v-model="dialogFormVisible" title="新增角色">
  <el-form :model="form">
  <div class="addTop">
      <div class="one">
          <el-form-item label="角色名称:" :label-width="formLabelWidth" class="three">
      <el-input v-model="form.title" autocomplete="off"  class="addRole"/>
    </el-form-item>
    <el-form-item label="角色编码:" :label-width="formLabelWidth" class="three">
      <el-input v-model="form.rolecode" autocomplete="off"  class="addRole"/>
    </el-form-item>
      </div>
       
      <div class="one">
          <el-form-item label="状态:" :label-width="formLabelWidth" class="three _one selectRole">
      <el-select v-model="form.status" placeholder="请选择状态" class="sex addRole">
        <el-option label="正常" value=1 />
        <el-option label="停用" value=0 />
      </el-select>
    </el-form-item>
      </div>
   
   <div class="aa">新增权限:</div>   <div class="menu option">
     <el-select v-model="roles.id" filterable placeholder="权限选择" size="large" @change="selectrole">
      <el-option
    v-for="item in roles"
    :key="item.id"
    :label="item.menuname"
    :value="item.id"
  
  />
</el-select>
    </div>
  </div>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="addUser">保存</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">
     取消
      </el-button>
    </span>
  </template>
</el-dialog>


  </div>
  </div>
  </div>
  <!-- 查看表格 -->
  <el-dialog
    v-model="view"
    title="角色基本信息"
    width="30%"
    :before-close="closeView"
  >
      <div class="roleViews">
   <span>角色id:</span> {{viewUpdateTime}}
      </div>
      <div class="roleViews">
        <span>更新名称:</span>{{viewTitle}}
      </div>
      <div class="roleViews">
        <span>角色编码:</span>{{viewRoleCode}}
      </div>
      <div class="roleViews">
        <span>角色状态:</span>{{viewStatus}}
      </div>
    
    

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="view = false">
         关闭
        </el-button>
      </span>
    </template>
  </el-dialog>






  <!-- 用户编辑 -->
 <div class="addUser">
  <el-drawer v-model="add" title="用户编辑" :with-header="false" size="24%"  :before-close="handleClose">
    
    <div><span>角色名称：</span><el-input v-model="user.title" autocomplete="off" class="editInput" /></div> 
    <div><span>角色编码：</span><el-input v-model="user.rolecode" autocomplete="off" class="editInput"/></div> 
    <div class="editOne"><span>状态：</span><el-input v-model="user.status" autocomplete="off" class="editInput"/></div> 
    <!-- <div><span>权限修改：</span><el-input v-model="user.rolemenu" autocomplete="off" class="editInput"/></div>    -->
   <div  class="id"> <span>权限修改：</span> <el-select v-model="role.id" filterable placeholder="权限id选择" size="large" @change="editrole" >
      <el-option
    v-for="item in role"
    :key="item.id"
    :label="item.menuname"
    :value="item.id"
  
  />
</el-select></div>
  <!-- <div class="context">
    <el-select v-model="value" filterable placeholder="权限内容选择" size="large" @change="selectrole" multiple="true">
      <el-option
    v-for="item in roles"
    :key="item.id"
    :label="item.menuname"
    :value="item.id"
  
  />
</el-select>
  </div> -->
     
</el-drawer>



 </div>
  <!-- 表格 -->
  <div class="from">
      <el-table
  :data="tableData"
  style="width: 100%"
  @select="(selection:any,index:any)=>select(selection,index)"
  @select-all="(selection:any)=>selectAll(selection)"
  row-key="ok"
  #default="scope"
>
  <el-table-column prop="title" label="角色名称" align="center" />
  <el-table-column prop="rolecode" label="角色编码" align="center" />
  <el-table-column prop="status" label="状态" align="center" />
  <el-table-column prop="updateTime" label="更新时间" align="center" />
  <el-table-column label="操作"  width="200px" align="center" >
 
    <template #default="scope" class="middle">
   <span @click="handleView(scope.$index, scope.row)" class="view">查看</span>
   <span @click="handleEdit(scope.$index, scope.row)" class="edit" >编辑</span>
   <span @click="handleStop(scope.$index, scope.row)" class="stop">停用</span>
   <span @click="handleDel(scope.$index, scope.row)" class="del">删除</span>  
  </template>
    
  </el-table-column>


</el-table>

  <div class="page">
      <el-pagination background layout="prev, pager, next" :total="1000" />
  </div>


  </div>

  </div>
  
 
</template>

<script lang="ts">
import axios from "axios"
import {defineComponent,reactive,onMounted,toRefs,ref,computed,onBeforeMount} from 'vue'
import { ElMessageBox, rowContextKey } from 'element-plus'
import {useStore} from "vuex"
import { fromPairs } from "lodash"
export default defineComponent({
       setup(){  
        const store=useStore()
      

 //表格数据的获取 
   let tableData:any=ref([])
  let view=ref(false)
   function GetUserData(){
    axios({
           method:"post",
           url:"http://1.14.73.59:8080/role/allselect",
           params:{
             page:1,
             limit:10,
            
           },
           headers:{
            authorization:"eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIwNTEwOWJlOC01ZmU5LTQ0NzYtOWE3Yy0zZGQ0MWY5NTY3MDUiLCJpc3MiOiJiajIzMl9qd3Rfc2VjZXJ0Iiwic3ViIjoie1wiY3JlZGVudGlhbHNcIjpcIjEyMzQ1NlwiLFwicGFzc3dvcmRcIjpcIjEyMzQ1NlwiLFwicHJpbmNpcGFsXCI6XCJhZG1pblwiLFwicmVtZW1iZXJNZVwiOmZhbHNlLFwidXNlcm5hbWVcIjpcImFkbWluXCJ9IiwiaWF0IjoxNjc2ODkxNzE2LCJleHAiOjE2NzY4OTM1MTZ9.g_wHMJM_SbyLYXhc1S8byiQ4uM4jo0UD3gx-OAuDsEs",
              "content-type":"application/json;charset=UTF-8",
             }
       }).then(resp=>{
         tableData.value= resp.data.data
        //  console.log(resp.data.data)
    const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
   }  
    
          for(let i=0;i<tableData.value.length;i++){
                if(tableData.value[i].status==1){
                  tableData.value[i].status="正常"
       
                 
                }else{
                  tableData.value[i].status="停用"
                }  
               
            tableData.value[i].updateTime=getDate(tableData.value[i].updateTime)
            // console.log(tableData.value[i].id)
          }

       
       })
   }
   //表格数据
  //  tableData= computed(()=>store.getters.getRoleData)


  onMounted(()=>{
    GetUserData()
  })
  // console.log(store.state.psr.selectData)
  //批量删除
 //筛选
   const sift=()=>{
   
        axios({
            url:"http://1.14.73.59:8080/role/staticselect",
            method:"post",
            params:{
               limit:4,
               page:1,
               static:options.value.valuet
            }
        }).then(resp=>{
        
          tableData.value=resp.data.data
          const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
   }  
    
          for(let i=0;i<tableData.value.length;i++){
                if(tableData.value[i].status==1){
                  tableData.value[i].status="正常"

                 
                }else{
                  tableData.value[i].status="停用"
                }  
               
            tableData.value[i].updateTime=getDate(tableData.value[i].updateTime)
            // console.log(tableData.value[i].id)
          }
        })  
   }

  //全选
  const selectAll=(a:any)=>{
          //  console.log(a)  
          store.dispatch("selectAll",a)
  }
  // 选择删除
   const select=(a:any,b:any)=>{
  store.dispatch("select",a)  
   }

     


 //增加角色



let roles:any=ref([{
     id:0,
     menuname:"",
     label:"",
     value:""

}])
 const roleadd=()=>{
  dialogFormVisible.value = true
     
  axios({
          url:"http://1.14.73.59:8080/role/Menus"
       }).then(resp=>{
            //  console.log(resp.data)
             roles.value=resp.data.data
            //  role.value=resp.data.data
       })   
  //  console.log(roleid.value)
     
 }


 const addUser=()=>{
  dialogFormVisible.value =false
   tableData.value.push(form)
  //  console.log("====")
  //  console.log(form.rolecode)
  //  console.log(parseInt(form.status))
  //  console.log(roleid.value,123)
   axios({
     url:"http://1.14.73.59:8080/role/add",
     method:"post",
     data:{
      "menus":[roleid.value],
       rolecode:form.rolecode,
       status:parseInt(form.status),
       title:form.title
       
     }
  }).then(resp=>{
    GetUserData()
         console.log(resp.data)
  })

 }


//角色选择 ------------------------------------------------------------------------











 const selectrole=()=>{
   
    roleid.value=roles.value.id
    // console.log(roleid.value,2222)
 }





//查看
 let  viewTitle:any=ref("")
 let  viewUpdateTime:any=ref("")
 let  viewStatus:any=ref("")
 let  viewRoleCode:any=ref("")
 const handleView=(index:any,row:any)=>{
  view.value=true
  axios({
            url:"http://1.14.73.59:8080/role/oneselect",
            method:"post",
            params:{
                id:row.id
            }
            
        }).then(resp=>{
              //  console.log(JSON.parse(resp.data.data)[0])
              // console.log(resp.data.data)
              // console.log(JSON.parse(resp.data.data).title)
             
            viewTitle.value=JSON.parse(resp.data.data).title
            viewUpdateTime.value=JSON.parse(resp.data.data).roleid
            viewStatus.value=JSON.parse(resp.data.data).status
            viewRoleCode.value=JSON.parse(resp.data.data).rolecode

        })
 }
    const closeView =()=>{
            view.value=false
    }
 const add = ref(false)
 //查询
//  const editUser=(index:any,row:any)=>{
           
        
//  }

 const handleEdit=(index:any,row:any)=>{
                add.value=true
                  user.value=row
                  roleids.value=row.id
                      
  axios({
          url:"http://1.14.73.59:8080/role/Menus"
       }).then(resp=>{
            //  console.log(resp.data)
             role.value=resp.data.data
            //  role.value=resp.data.data
       })   
    }  
    //编辑请求  --------------------------------------------------------------------------------

    let role:any=ref([{
     id:0,
     menuname:"",
     label:"",
     value:""

}]) 

let roleid=ref()
let roleids=ref()
  let editrole=()=>{
       role.value=role.value.id
      //  console.log(role.value.id)
      //  console.log()
  }











    const handleClose = (done: () => void) => {
     ElMessageBox.confirm('确定保存修改好的用户信息?')
  .then(() => {

    console.log(role.value)
 
    axios({
                    url:"http://1.14.73.59:8080/role/update",
                    method:"post",
                    data:{
                      "menus":[role.value],
                      rolecode:user.value.rolecode,
                      status: parseInt(user.value.status),
                       title:user.value.title,
                       roleid:roleids.value
                      }
                }).then(resp=>{
                   console.log(resp.data)
                   
                })
            
    done()
  })
  .catch(() => {
    // catch error
    add.value=false
  })
}
    const handleDel=(index:any,row:any)=>{
          tableData.value.splice(index,1)
     
       axios({
          url:"http://1.14.73.59:8080/role/delete",
          method:"post",
          params:{
             id:row.id
          }
       }).then(resp=>{
             console.log(resp.data)
       })

          
    }
    const handleStop=(index:any,row:any)=>{
          row.status="停用"
    }
     
  //查询
       const search=()=>{
       
             axios({
               url:"http://1.14.73.59:8080/role/nameselect",
               method:"post",
               params:{
                page:1,
             limit:10,
             name:input.value

               }
             }).then(resp=>{
              tableData.value=[]
               resp.data.data=JSON.parse(resp.data.data)
                tableData.value=resp.data.data
                const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
   }  
    
          for(let i=0;i<tableData.value.length;i++){
                if(tableData.value[i].status==1){
                  tableData.value[i].status="正常"

                 
                }else{
                  tableData.value[i].status="停用"
                }  
               
            tableData.value[i].updateTime=getDate(tableData.value[i].updateTime)
            // console.log(tableData.value[i].id)
          }
                  
             })
          
       } 
         
      
          const dialogTableVisible = ref(false)
           const dialogFormVisible = ref(false)
          const formLabelWidth = '140px'  
         let user:any =ref({
           id:'',
         rolecode:"",
         status:"",
         title:"",
        updateTime:"",
        rolemenu:"权限管理"
        
          })

          const form:any = reactive({
        title: '',
           date1: '',
          date2: '',
          delivery: false,
          status:"",
         rolecode:"", 
          updateTime:"",
    


})
       let input = ref("") 
        const value=ref("")
      let  options:any=ref([
          {
              valuet:"1",
              label:"正常"
          },
          {
            valuet:"0",
              label:"停用"
          }
        ])
   //添加角色表格
   const addTableData = [
{
 
  addName: '经理/主管',
  addId: 'dept',
},
{

  addName: '普通员工',
  addId: 'user',
},


]
   


 


 
           return{
               input,
               value,
               options,
               tableData,
               handleEdit,
               handleDel,
               handleStop,
               handleView,
               dialogTableVisible,
               dialogFormVisible,
               formLabelWidth,
               form,
               addTableData,
               search,
               addUser,
               add,
               user,
              //  editUser,
               handleClose,
               select,
               selectAll,
               sift,
               view,
               closeView,
               viewUpdateTime,
               viewTitle,
               viewRoleCode,
               viewStatus,
               roleadd,
               roles,
               selectrole,
               role,
               editrole
   
             


               
           }
       }
       
     
})


</script>

<style scoped lang="less">
/* 添加用户 */
.marTop(@top){
 position: relative;
top: @top;
}

.option{
     position: relative; 
     top: -45px;
     left: 140px;
   
}
.addnewrole{
   position: relative;
   top:-9px;
   height: 40px;
}
.editOne{
 margin-left: 32px;
}
.addUser div{
margin-top: 10px;
}
.addUser span{
position: relative;
top: 6px;
}
.addBottom{
  position: relative;
  bottom: 40px;
}
.title{
position: relative;
bottom: 50px;
font-size: 18px;
color: #303133;
}

.editInput{
width: 220px;
}
_one{
  .marTop(-26px)
}
._two{
  .marTop(-26px)
}
._three{
  .marTop(-38px)
}
._four{
  .marTop(-38px)
}
._five{
  .marTop(-50px)
}
.three{
position: relative;
bottom: 14px;
}
.addTop{
  position: relative;
  bottom: 30px;
}
.password{
   width: 198px;
}
.sex{
width: 120px;
}
.phone{
  position: relative;
  left: 76px;
}
.one{
  display: flex;
}
.box{
  width: 1300px;
}
.anyDel{
   margin-top: 18px;
   color: #00ccff;
   cursor: pointer;



}
.aa{
   position: relative;
   left: 68px;
}
.page{
   margin-top: 48px;
   margin-left: 18px;
}
.top{
  display: flex;
  margin-left: 18px;
  margin-top: 18px;
}
.select{
width: 134px;

}
.right{
display: flex;
margin-left: 66px;
}
.left{
   width:340px;
   display: flex;

}
.button{
margin-left: 10px;
}
.btn{
   height: 39px;
   position: relative;
   top: 1px;
}
.del{
  color:#ff3300;
  margin-left: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.view{
  color:#00ccff ;
  margin-left: 10px;
  font-weight: 600;
  cursor: pointer;
}
.stop{
  color: #ff9933;
  margin-left: 10px;
  font-weight: 600;
  cursor: pointer;
}
.edit{
  color:#00cc99 ;
  margin-left: 10px;
  font-weight: 600;
  cursor: pointer;
}
.from{
  width: 1300px;
   margin-top: 80px;
 
}
.addUser{
   position: relative;
   left: 576px;
}
.w-50{
height: 40px;
}
.addRole{
  position: relative;
  top: -11px;
}
.selectRole{
  position: relative;
  top: -24px;
}
.roleViews{
   margin-top: 12px;
}
.roleViews>span{
  color: blue;
  margin-right: 8px;
}
</style>